
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        用户
    </h1>
</section>

<!-- Main content -->
<section class="content" id="user-app">

    <div class="row" v-show="show.user">
        <div class="col-md-12">
            <div class="col-md-12" style="background: white">
                <h3>统计信息： <small><a class="btn btn-sm" @click="getStatistic"><i class="fa fa-refresh"></i></a></small></h3>
                <div class="col-md-2">
                    <div class="form-group">
                        注册用户量：<strong>{{statistic.client}}</strong>
                    </div>
                </div>
                <!--<div class="col-md-2">
                    <div class="form-group">
                        ios游客量：<strong>{{statistic.tourist}}</strong>
                    </div>
                </div>-->
            </div>
        </div>
    </div>

    <div class="row" v-show="show.user">
        <div class="col-md-12">
            <h3>用户列表</h3>
            <div class="col-md-1">
                <a class="btn btn-default" @click="getList">查询</a>
            </div>
            <div class="col-md-2">
                <input v-model="page.mobile" class="form-control" placeholder="手机号/帐号/ID">
            </div>
            <div class="col-md-1">
                <a class="btn btn-default" @click="add">添加</a>
            </div>
        </div>
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>积分</th>
                    <th>注册时间</th>
                    <th>注册来源</th>
                    <th>邀请信息</th>
                    <th>推广信息</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.nickname}}</td>
                    <td>{{item.credit}}</td>
                    <td>{{item.regtime}}</td>
                    <td>{{item.register_source}}</td>
                    <td>
                        <span v-if="item.invite_code">{{item.invite_agency_name}}: {{item.invite_code}}</span>
                    </td>
                    <td>
                        <span v-if="item.sales_code">{{item.sales_agency_name}}: {{item.sales_code}}</span>
                    </td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(item)">修改</a>
                        <a class="btn btn-primary btn-xs" @click="getCustomer(item.id)">我的客户</a>
                        <a class="btn btn-primary btn-xs" @click="getOrder(item.id)">我的推广订单</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="page.rows" :last="page.last" v-model="page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-if="show.edit">
        <div class="col-md-4 col-md-offset-2">
            <h3 v-if="forms.id>0">编辑</h3>
            <h3 v-else>添加</h3>
            <div class="form" role="form">
                <div class="form-group">
                    <label>用户名：</label>
                    <input class="form-control" name="mobile" type="text" v-model="forms.mobile" :readonly="false" rel="mobile">
                </div>
                <div class="form-group">
                    <label>密码：</label>
                    <input class="form-control" type="password" v-model="forms.password">
                </div>
                <div class="form-group">
                    <label>确认密码：</label>
                    <input class="form-control" type="password" v-model="forms.isPassword">
                </div>
                <div class="form-group">
                    <label>用户昵称：</label>
                    <input class="form-control" type="text" v-model="forms.nickname">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                    <a class="btn btn-default" @click="show.edit = false;show.user=true">关闭</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row" v-if="show.customerPage">
        <div class="col-md-12">
            <h3>ID为{{customer.current}}的用户邀请列表</h3>
            <div class="col-md-1">
                <a class="btn btn-default" @click="getCustomer(customer.current)">查询</a>
            </div>
            <div class="col-md-2">
                <input v-model="customer.search_mobile" class="form-control" placeholder="手机号">
            </div>
            <div class="col-md-1">
                <a v-show="show.customerPage" class="btn btn-danger" @click="show.customerPage = false;show.user=true">关闭</a>
            </div>
        </div>
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>积分</th>
                    <th>注册时间</th>
                    <th>注册来源</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in customer.list">
                    <td>{{item.id}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.nickname}}</td>
                    <td>{{item.credit}}</td>
                    <td>{{item.regdate}}</td>
                    <td>{{item.register_source}}</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="customer.page.rows" :last="customer.page.last" v-model="customer.page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-if="show.orderPage">
        <div class="col-md-12">
            <h3>ID为{{order.current}}的收益列表</h3>
            <div class="col-md-1">
                <a v-show="show.orderPage" class="btn btn-danger" @click="show.orderPage = false;show.user=true">关闭</a>
            </div>
        </div>
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>课程</th>
                    <th>订单时间</th>
                    <th>账户</th>
                    <th>收益</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,k) in order.list">
                    <td>{{k+1}}</td>
                    <td>{{item.bill_item_title}}</td>
                    <td>{{item.bill_paydate}}</td>
                    <td>{{item.mobile}}</td>
                    <td>{{item.draw_percentage_price}}</td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <page :rows="order.page.rows" :last="order.page.last" v-model="order.page.page"></page>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

</section>
<!-- /.content -->

<script>
    var user_app = new Vue({
        el: '#user-app',
        data: {
            list: [],
            page: {
                last: 1,
                page: 1,
                rows: 10,
                mobile: null
            },
            total: 0,
            statistic: {client: 0, tourist: 0},
            forms: {

            },
            show: {
                user:true,
                edit: false,
                customerPage : false,
                orderPage: false,
            },
            customer:{
                list: [],
                total: 0,
                page: {
                    last: 1,
                    page: 1,
                    rows: 10,
                },
                current:0,
                search_mobile:'',
            },
            order:{
                list: [],
                total: 0,
                page: {
                    last: 1,
                    page: 1,
                    rows: 10,
                },
                current:0,
            },
        },
        created: function () {
            this.getList();
            this.getStatistic()
        },
        methods: {
            // 用户列表
            getList: function(){
                ajax({
                    uri: '/user/list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.data;
                        this.page.last = resp.last_page;
                        this.total = resp.total;
                    }.bind(this)
                });
                this.show.user= true;
            },

            // 用户统计
            getStatistic: function(){
                ajax({
                    uri: '/user/statistic',
                    success: function (resp) {
                        this.statistic = resp.data;
                    }.bind(this)
                });
                this.show.user= true;
            },

            // 创建用户
            add: function () {
                this.forms = {
                    id:0,
                    mobile:'',
                    password:'',
                    isPassword:'',
                    nickname:''
                };

                this.show.user= false;
                this.show.edit = true;
            },

            // 编辑用户
            edit: function (item) {
                this.forms = Object.assign({}, item);
                this.forms = {
                    id:item.id,
                    mobile: item.mobile,
                    password:'',
                    isPassword:'',
                    nickname:item.nickname
                };

                this.show.user= false;
                this.show.edit = true;
            },

            // 保存用户数据
            save: function () {
                if (this.forms.password == '' || this.forms.password.length<6) {
                    alert('登录密码不能为空，且不能少于6位');
                    return false;
                }
                if (this.forms.isPassword !== this.forms.password) {
                    alert('两次输入密码不一致');
                    return false;
                }

                ajax({
                    uri: '/user/save',
                    data: this.forms,
                    success: function (resp) {
                        this.show.edit = false;
                        this.getList();
                    }.bind(this)
                })

            },

            getCustomer: function (id) {
                this.customer.current=id;
                ajax({
                    uri: '/user/invitedUsersList',
                    data: {page:this.customer.page.page,rows:this.customer.page.rows,user_id:id,mobile:this.customer.search_mobile},
                    success: function(resp){
                        this.customer.list = resp.data.list;
                        this.customer.page.last = resp.data.total_page;
                        this.customer.total = resp.data.total;
                    }.bind(this)
                });
                this.show.user= false;
                this.show.edit = false;
                this.show.customerPage = true;
            },

            getOrder: function (id) {
                this.order.current=id;
                ajax({
                    uri: '/user/inviterdOrder',
                    data: {page:this.order.page.page,rows:this.order.page.rows,user_id:id},
                    success: function(resp){
                        this.order.list = resp.data.data;
                        this.order.page.last = resp.data.last_page;
                        this.order.total = resp.data.total;
                    }.bind(this)
                });
                this.show.user= false;
                this.show.edit = false;
                this.show.customerPage = false;
                this.show.orderPage = true;
            },

        },
        watch: {
            'page.page': function (nv, ov) {
                this.getList();
            }
        }
    })
</script>
